<template>
  <view>
    <view v-if="newCouponObj.couponUseStatus == 0" class="coupon" @click="choiceCou">
      <image :src="vuex_imgPath+'/couponBg.png'" class="BgImg" />
      <view class="coupon_left">
        <view v-if="newCouponObj.couponType ==10" class="cx-img mj-img">
          <text class="t-icon t-icon-manjianquan_tongyong_1" />
        </view>
        <view v-if="newCouponObj.couponType ==20 " class="cx-img yf-img">
          <text class="t-icon t-icon-yunfeiquan_tongyong_1" />
        </view>
        <view class="price-class"><text>￥</text><text class="price-fontsize">{{ newCouponObj.couponValue }}</text></view>
        <view v-if="newCouponObj.couponUseCondition !=0" class="mj-text"> {{ '满'+Math.trunc(newCouponObj.couponUseCondition)+'元可用' }}</view>
        <view v-else class="mj-text">不限订单金额使用</view>
      </view>
      <view class="coupon_right">
        <view class="right-width">
          <view class="name">
            <text class="couName">{{ newCouponObj.applCategoryIntroduce }}</text>
          </view>
          <view v-if="!!newCouponObj.allTimer" class="time">{{ newCouponObj.allTimer }}</view>
          <view class="type">{{ applRangeFn(newCouponObj.applRange) }}</view>
        </view>
        <view v-if="newCouponObj.receiveState == 1 && !choice" class="button" @click="getReceCoupons">立即领取</view>
        <view v-if="textFlag" class="button" @click="getShopIndex">立即使用</view>
        <view v-if="newCouponObj.receiveState == 0 && !choice" class="buttonYees">已领取</view>
        <view v-if="choice" :class="newCouponChoosen.couponCode == newCouponObj.couponCode ? 'radioDefault radioAcitve' : 'radioDefault'">
          <u-icon v-if="newCouponChoosen.couponCode == newCouponObj.couponCode" name="checkmark" color="#FFFFFF" size="10" />
        </view>
      </view>
    </view>
    <view v-if="newCouponObj.couponUseStatus == -1" class="coupon">
      <image :src="vuex_imgPath+'/couponNoBg.png'" class="BgImg" />
      <view class="coupon_left">
        <view v-if="newCouponObj.couponType ==10 " class="cx-img mj-img">
          <text class="t-icon t-icon-manjianquan_tongyong_2" />
        </view>
        <view v-if="newCouponObj.couponType ==20 " class="cx-img yf-img">
          <text class="t-icon t-icon-yunfeiquan_tongyong_2" />
        </view>
        <view class="price-class"><text>￥</text><text class="price-fontsize">{{ newCouponObj.couponValue }}</text></view>
        <view v-if="newCouponObj.couponUseCondition !=0" class="mj-text"> {{ '满'+Math.trunc(newCouponObj.couponUseCondition)+'元可用' }}</view>
        <view v-else class="mj-text">不限订单金额使用</view>
      </view>
      <view class="coupon_right">
        <view class="right-width">
          <view class="name">
            <text class="couName" style="color: #999999">{{ newCouponObj.applCategoryIntroduce }}</text>
          </view>
          <view v-if="!!newCouponObj.allTimer" class="time">{{ newCouponObj.allTimer }}</view>
          <view class="type" style="color: #999999">{{ applRangeFn(newCouponObj.applRange) }}</view>
        </view>
        <view v-if="!textFlag || choice" class="buttonYees" style="color: #999999">{{ status[newCouponObj.useStatus] }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { getReceCoupons } from '@/api/shopDetail';

export default {
  props: {
    couponObj: {
      type: Object,
      default: null
    },
    couponChoosen: {
      type: Object,
      default: null
    },
    choice: {
      type: Boolean,
      default: false
    },
    textFlag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      status: {
        '10': '未开始',
        '20': '可使用',
        '30': '已使用',
        '40': '已过期',
        '50': '作废',
        '60': '使用失败',
      },
      newCouponChoosen: this.couponChoosen
    }
  },
  computed: {
    newCouponObj() {
      const { useBegtime, useEndtime } = this.couponObj
      var startTime = useBegtime.split(' ')[0]
      var endTime = useEndtime.split(' ')[0]
      var Obj = { ...this.couponObj, allTimer: `${startTime} - ${endTime}` }
      return Obj
    }
  },
  watch: {
    couponChoosen(oldVal, newVal) {
      if (oldVal && newVal && newVal != oldVal) {
        this.newCouponChoosen = newVal
      }
    }
  },
  methods: {
    getShopIndex() {
      uni.redirectTo({ url: '/shopIndex/shopIndex' })
    },
    choiceCou() {
      this.$emit('updateCode', this.newCouponObj)
    },
    applRangeFn(code) {
      const applRangeText = code == 0 ? '全场通用' : code == 1 ? '指定分类' : code == 3 ? '指定商品' : ''
      return applRangeText
    },
    getReceCoupons() {
      const { accountType, memberId, mainCustomerId } = this.vuex_memberInfo
      const params = {
        couponCode: this.couponObj.couponCode,
        customer_id: mainCustomerId,
        account_type: accountType,
        member_id: memberId
      }
      getReceCoupons(params).then((res) => {
        if (res.errorCode == '0') {
          this.$emit('reload')
          this.$u.toast(res.sub_msg)
        }
      })
    },
  }
}
</script>

<style scoped lang="scss">
.coupon {
  width: 684rpx;
  height: 144rpx;
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: 24rpx;
  .radioDefault {
    flex-shrink: 0;
    width: 32rpx;
    height: 32rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    border-radius: 50%;
    border: 1rpx solid #D3D3D3;
    margin-right: 16rpx;
  }
  .radioAcitve {
    background: #FF5533;
    border: 1rpx solid #FF5533;
  }
  .BgImg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }
  .coupon_left {
    width: 280rpx;
    height: 144rpx;
    display: flex;
    flex-direction:column;
    justify-content:center;
    color: #fff;
    font-size: 48rpx;
    font-weight: 700;
    z-index: 1;
    position: relative;
    text-align: center;
    text {
      font-size: 24rpx;
      font-weight: 700;
    }
    .mj-text{
      font-size: 22rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 190rpx;
      white-space: nowrap;
    }
    .cx-img{
      width: 88rpx;
      margin-left: 8rpx;
      height: 42rpx;
      .t-icon{
        width: 88rpx;
        height: 42rpx;
      }
    }
    .price-class{
      height: 61rpx;
      line-height: 61rpx;
      .price-fontsize{
        font-size: 28rpx;
        font-weight: 700;
    }
    }
  }
  .coupon_right {
    width: 100%;
    padding:0 24rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    z-index: 1;
    .right-width{
      width: 314rpx;
    }
    .name{
      max-height:64rpx;
      display: flex;
    }

    .couName {
      max-height: 64rpx;
      color: #FF5533;
      font-size:28rpx;
      font-weight: 700;
      line-height:32rpx;
      overflow:hidden;
      display: -webkit-box;
      text-overflow: ellipsis;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
    }
    .time {
      color: #AAAAAA;
      font-size: 20rpx;
      font-weight: 400;
      margin: 3rpx;
    }
    .type {
      color: #808080;
      font-size: 20rpx;
      font-weight: 400;
    }
    .button {
      background: #FF5533;
      width: 130rpx;
      height: 48rpx;
      border-radius: 8rpx;
      color: #FFFFFF;
      font-size: 24rpx;
      font-weight: 400;
      display: flex;
      justify-content: center;
      align-items: center;
      align-content: center;
      flex-shrink: 0;
    }
    .buttonYees {
      color: #FF5533;
      width: 130rpx;
      height: 48rpx;
      border-radius: 8rpx;
      font-size: 24rpx;
      font-weight: 400;
      display: flex;
      justify-content: center;
      align-items: center;
      align-content: center;
    }
  }
}
</style>
